{% load static from staticfiles %}
{% load tutorial_tags %}
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Django Websocket Redis</title>
	<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
	<header class="navbar navbar-static-top navbar-inverse">
		<div class="container">
			<div class="navbar-header">
				<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
			</div>
			<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
				<ul class="nav navbar-nav">
					<li class="{% active request 'broadcast_chat' %}">
						<a href="{% url 'broadcast_chat' %}">Broadcast Chat</a>
					</li>
					<li class="{% active request 'user_chat' %}">
						<a href="{% url 'user_chat' %}">User Chat</a>
					</li>
					<li class="{% active request 'group_chat' %}">
						<a href="{% url 'group_chat' %}">Group Chat</a>
					</li>
				</ul>
				<ul class="nav navbar-nav navbar-right">
					<li class="dropdown" style="margin-right: 12em;">
					{% if request.user.is_authenticated %}
						<a class="dropdown-toggle" href="#" data-toggle="dropdown">{{ request.user.get_full_name }} <span class="caret"></span></a>
						<div class="dropdown-menu" style="padding:1em;">
							<form class="form" action="{% url 'logout' %}" method="post">{% csrf_token %}
								<input type="hidden" name="next" value="{{ request.get_full_path }}" />
								<input class="btn btn-success btn-block" type="submit" value="Logout">
							</form>
						</div>
					{% else %}
						<a class="dropdown-toggle" href="#" data-toggle="dropdown">Login <span class="caret"></span></a>
						<div class="dropdown-menu" style="padding:1em;">
							<p class="help-block">Login as <em>john</em> or <em>mary</em> using password <em>secret</em>.</p>
							<form class="form" action="{% url 'login' %}" method="post">{% csrf_token %}
								<input type="hidden" name="next" value="{{ request.get_full_path }}" />
								<div class="form-group">
									<input class="form-control" placeholder="Username" name="username" type="text">
								</div>
								<div class="form-group">
									<input class="form-control" placeholder="Password" name="password" type="password" value="">
								</div>
								<input class="btn btn-success btn-block" type="submit" value="Login">
							</form>
						</div>
					{% endif %}
					</li>
				</ul>
			</nav>
		</div>
	</header>

	<div class="container">
		{% block main_content %}
		<div class="row">
			<div class="col-xs-12">
				<h1>Simple chat {% block "title" %}{% endblock %}</h1>
			</div>
		</div>
		<div class="row">
			<div class="col-xs-12 col-md-11 col-lg-10">
				{% block introduction %}{% endblock introduction %}
				<pre id="billboard" style="overflow-y: auto; height: 24em; margin-top: 1em;"></pre>
			</div>
		</div>
		<div class="row">
			<div "form-inline">
				<div class="form-group col-xs-12 col-sm-7">
					<input class="form-control" type="text" id="text_message" />
				</div>
				<div class="form-group col-xs-12 col-sm-5 col-md-4">
					{% block control_panel %}
					<button class="btn btn-primary" id="send_message">Send message</button>
					{% endblock control_panel %}
				</div>
			</div>
		</div>
		{% endblock main_content %}
	</div>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
	<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js" type="text/javascript"></script>
	<script src="{% static "js/ws4redis.js" %}" type="text/javascript"></script>
	{% block script_panel %}{% endblock %}
	<a href="https://github.com/jrief/django-websocket-redis" class="hidden-xs">
		<img style="position: absolute; top: 0; right: 0; border: 0; z-index: 1001;" src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png">
	</a>
</body>

</html>
